<!DOCTYPE html>
<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{common/base}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- jQuery 3 -->
    <script th:src="@{~/js/jquery.min.js}" th:inline="javascript" type="text/javascript"></script>
    <!-- jQuery UI 1.11.4 -->
    <script th:src="@{~/js/plugins/jQueryUI/jquery-ui.js}" th:inline="javascript" type="text/javascript"></script>
    <!-- Bootstrap 3.3.7 -->
    <script th:src="@{~/js/plugins/bootstrap/js/bootstrap.min.js}" th:inline="javascript" type="text/javascript"></script>
    <!-- DataTables -->
    <script th:src="@{~/js/plugins/datatables.net/js/jquery.dataTables.min.js}" th:inline="javascript" type="text/javascript"></script>
    <script th:src="@{~/js/plugins/datatables.net-bs/js/dataTables.bootstrap.min.js}" th:inline="javascript" type="text/javascript"></script>
    <!-- zTree-->
    <script th:src="@{~/js/plugins/ztree/jquery.ztree.all.js}" th:inline="javascript" type="text/javascript"></script>
    <!-- select2-->
    <script th:src="@{~/js/plugins/select2/js/select2.js}" th:inline="javascript" type="text/javascript"></script>
    <script th:src="@{~/js/plugins/select2/js/i18n/zh-CN.js}" th:inline="javascript" type="text/javascript"></script>

    <script th:src="@{~/js/biz/dataTables.js}" th:inline="javascript" type="text/javascript"></script>
    <script th:src="@{~/js/biz/select2Util.js}" th:inline="javascript" type="text/javascript"></script>
    <script th:src="@{~/js/biz/catalog.js}" th:inline="javascript" type="text/javascript"></script>
    <script th:src="@{~/js/plugins/ztree/jquery.ztree.all.js}" th:inline="javascript" type="text/javascript"></script>
    <style type="text/css">
        .ztree li span.button.icon03_ico_open{margin-right:2px; background: url(/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
        .ztree li span.button.icon03_ico_close{margin-right:2px; background: url(/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

        .ztree li span.button.icon04_ico_open{margin-right:2px; background: url(/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
        .ztree li span.button.icon04_ico_close{margin-right:2px; background: url(/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

        .ztree li span.button.icon05_ico_open{margin-right:2px; background: url(/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
        .ztree li span.button.icon05_ico_close{margin-right:2px; background: url(/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

     .ztree li span.button.icon03_ico_docu{margin-right:2px; background: url(/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
    .ztree li span.button.icon04_ico_docu{margin-right:2px; background: url(/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
    .ztree li span.button.icon05_ico_docu{margin-right:2px; background: url(/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
    </style>
</head>
<body>
<div layout:fragment="index">
    <SCRIPT LANGUAGE="JavaScript">
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            edit: {
                enable: true,
                showRemoveBtn: false,
                showRenameBtn: false,
            },
            drag: {
                prev:false,
                next:false,
                inner: true
            },

        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [
          ];
        $(document).ready(function(){
            zTreeObj = $.fn.zTree.init($("#tree1"), setting, zNodes);
        });
    </SCRIPT>

    <SCRIPT LANGUAGE="JavaScript">
        var zTreeObj2;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting2 = {
            edit: {
                enable: true,
                showRemoveBtn: false,
                showRenameBtn: false,
            },
            drag: {
                prev:false,
                next:false,
                inner: true
            },
            callback: {
                beforeDrop:function (treeId, treeNodes, targetNode, moveType, isCopy) {
                    if (!targetNode){
                        for(var i=0; i<treeNodes.length; i++){
                            if(treeNodes[i].type != "手段"){
                                alert("仅手段的属性可以拖动到根节点")
                                return false;
                            }
                        }
                    }else {
                        console.log(targetNode)
                        console.log(targetNode.type)
                        var tmpType=rules[targetNode.type]
                        for(var i=0; i<treeNodes.length; i++){
                            console.log(tmpType)
                            if(tmpType){
                                    //in_array方法
                                    for(var u=0; u<tmpType.length; u++){
                                        console.log(tmpType[u])
                                        console.log(treeNodes[i].type)
                                        if(tmpType[u] == treeNodes[i].type){
                                            return true;
                                        }
                                    }
                            }
                            alert("数据类型错误")
                            return false;
                        }
                    }
                    return true;
                }
            }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes2 = [
            {name:"手段", isParent: true,open:true, children:[
                    {name:"手段AAAA",type:"手段", iconSkin:"icon03"}, {name:"手段BBBB",type:"手段", iconSkin:"icon03"}]},
            {name:"数据类型", isParent: true, open:true, children:[
                    {name:"类型CCCC1",type:"数据类型", iconSkin:"icon04"}, {name:"类型DDDDD",type:"数据类型", iconSkin:"icon04"}]},
            {name:"数据名称", isParent: true, open:true, children:[
                    {name:"名称XXX1",type:"数据名称", iconSkin:"icon05"}, {name:"名称XXXDD",type:"数据名称", iconSkin:"icon05"}]},
             ]
        $(document).ready(function(){
            zTreeObj2 = $.fn.zTree.init($("#tree2"), setting2, zNodes2);
        });
    </SCRIPT>

    <style type="text/css">
        ul.ztree {
            margin-top: 10px;
            border: 1px solid #617775;
            background: #f0f6e4;
            height: 560px;
            overflow-y: scroll;
            overflow-x: auto;
            margin: 5px;
        }
    </style>
    <div style="margin: 10px;text-align: center">
        模型名称：XXX，模型定义: 手段->数据类型(允许多级)->数据名称
    </div>
    <div  class="pull-left"  style="margin: 5px;text-align: center">编辑模型</div><div  class="pull-right"  style="margin: 5px;text-align: center">选择属性</div>
    <div  class="clearfix" style="clear: both"></div>
    <div class="pull-left zTreeDemoBackground left" style="width: 48%">
        <ul id="tree1" class="ztree"></ul>
    </div>
    <div class="pull-right zTreeDemoBackground left" style="width: 48%">
        <ul id="tree2" class="ztree"></ul>
    </div>
    <div  class="clearfix" style="clear: both"></div>
    <div style="text-align:center;margin: 10px">
        <button class="btn btn-default" style="width: 100px">保存</button>
    </div>


    <!--这里开始是-->
    <script>
        var model =$.parseJSON('{"classId":"A","children":[{"classId":"B","className":"B","multipule":true,"children":[{"classId":"C","className":"c","multipule":false}]}],"className":"A","multipule":false}');
        var rule={}
        rule.allowType={}
        rule.root=model.classId
        getRule(model,model.children[0])

        function getRule(parent,child){
            if(!rule.allowType[parent.classId]){
                rule.allowType[parent.classId]=[]
            }
            rule.allowType[parent.classId].push(child.classId)
            if(parent.multipule==true){
                rule.allowType[parent.classId].push(parent.classId)
            }
            if(child.children){
                getRule(child,child.children[0])
            }
        }

        console.log(rule)

        var rules={}
        rules["手段"]=["数据类型"];
        rules["数据类型"]=["数据类型","数据名称"];
        rules["数据名称"]=[];

    </script>

</div>

</body>
</html>